<%@ page language="java" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap-datetimepicker.min.css">
	<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap-table.min.css">
	<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap-table.css">
	<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="assets/vendor/linearicons/style.css">
	<link rel="stylesheet" href="assets/vendor/chartist/css/chartist-custom.css">
	<!-- MAIN CSS -->
	<link rel="stylesheet" href="assets/css/main.css">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" href="assets/css/demo.css">
	<!-- GOOGLE FONTS -->
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon.png">
</head>

<body>
		
		<jsp:include page="/assets/jsp/header.jsp" flush="true"/>
		<jsp:include page="/assets/jsp/menu.jsp" flush="true"/>
		<!-- MAIN -->
		<div class="main">
			<!-- MAIN CONTENT -->
				<form role="form" id="searchForm" class="form-horizontal" style=" border:1px solid #006600">
                 <legend></legend>
                <fieldset>
                    <div class="form-group">
                        <label class="col-sm-2" for="teller_number">柜员代号</label> 
                        <div class="col-sm-2">
                        	<input type="text"   class="form-control" id="teller_number" name="teller_number" style=" border:1px solid #006600" >
                        </div>
                        <label class="col-sm-2" for="teller_name">柜面名称</label> 
                        <div class="col-sm-2">
                        	<input type="text"   class="form-control" id="teller_name" name="teller_name" style=" border:1px solid #006600" >
                        </div>
                        <label class="col-sm-2"  for="teller_status">柜员状态</label>
                        <div class="col-sm-2">
                        <select id="teller_status"  name="teller_status" class="form-control">
                        	<option value="">请选择</option>
                        	<option value="0">已退出</option>
                        	<option value="1">已登录</option>
                        	<option value="2">锁定</option>
                        </select>
                        </div>
                     </div>
               </fieldset>
                    <div class="form-group">
                    	<div class="col-sm-1">
                    	<input type="button"  id="searchBtn" class="btn btn-default" value="开始搜索"/>
                    	</div>
                    	 <div class="col-sm-1">
                    	 <input type="button"  onclick="addTellerView();"  class="btn btn-default" value="增加柜员"/>
                    	 </div>
                    </div>
                </form>
                 <legend></legend>
      
				  <!--列表展示-->
     <table id = "table"  data-filter-control="true"></table>
				
			<!-- END MAIN CONTENT -->
		
		
          </div>
		<!-- END MAIN -->
		<div class="clearfix">
		<footer>
			<div class="container-fluid">
				<p class="copyright">Copyright &copy; 2018.Company  ShanChuanli  All rights reserved.More Templates </p>
			</div>
		</footer>
	 </div>
	<!-- END WRAPPER -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div class="modal-dialog" style="width:600px;">
        <div class="modal-content" >
            <div class="modal-header">
            	<label>修改柜员信息</label>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <form role="form" id="change_form" class="form-horizontal" style="border-right:40px solid #FFF;border-top:10px solid #FFF" >
			<div class="form-group">

				<label class="col-sm-3" for="change_teller_number" style="font-size:15px;text-align:right;"  >柜员代号</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="change_teller_number"
						name="teller_number" readonly="readonly" />
				</div>
				<label class="col-sm-3" for="change_teller_name" style="font-size:15px;text-align:right;">柜员名称</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="change_teller_name"
						name="teller_name" >
				</div>
			</div>
			<div class="form-group">

				<label class="col-sm-3" for="change_teller_role" style="font-size:15px;text-align:right;">柜员角色</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="change_teller_role"
						name="teller_role"  />
				</div>
				<label class="col-sm-3" for="change_teller_status" style="font-size:15px;text-align:right;">柜员状态</label>
				<div class="col-sm-3">
				<select id="change_teller_status" name="teller_status"
						class="form-control">
						<option value="">请选择</option>
						<option value="0">已退出</option>
						<option value="1">已登录</option>
						<option value="2">锁定</option>
					</select>
				</div>
			</div>
			<div class="form-group">

				<label class="col-sm-3" for="change_organization" style="font-size:15px;text-align:right;">机构号</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="change_organization"
						name="organization"  readonly="readonly" />
				</div>
				<label class="col-sm-3" for="change_teller_id_type" style="font-size:15px;text-align:right;">证件类型</label>
				<div class="col-sm-3">
						<select id="change_teller_id_type" name="teller_id_type"
						class="form-control">
						<option value="01">身份证</option>
						<option value="02">驾照</option>
						<option value="03">护照</option>
						<option value="04">其他</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3" for="change_teller_idno" style="font-size:15px;text-align:right;">证件号</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="change_teller_idno"
						name="teller_idno"  readonly="readonly" />
				</div>
				<label class="col-sm-3" for="change_tellerphone" style="font-size:15px;text-align:right;">手机号</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="change_tellerphone"
						name="tellerphone" >&nbsp;
				</div>
			</div>
			<div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="change_submit();">提交更改</button>
            </div>
		</form>
            
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true" >
    <div class="modal-dialog" style="width:600px;">
        <div class="modal-content" >
            <div class="modal-header">
            	<label>新增柜员</label>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <form role="form" id="change_form" class="form-horizontal" style="border-right:40px solid #FFF;border-top:10px solid #FFF" >
			<div class="form-group">

				<label class="col-sm-3" for="add_teller_number" style="font-size:15px;text-align:right;"  >柜员代号</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="add_teller_number"
						name="teller_number"  />
				</div>
				<label class="col-sm-3" for="add_teller_name" style="font-size:15px;text-align:right;">柜员名称</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="add_teller_name"
						name="teller_name" >
				</div>
			</div>
			<div class="form-group">

				<label class="col-sm-3" for="add_teller_role" style="font-size:15px;text-align:right;">柜员角色</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="add_teller_role"
						name="teller_role"  />
				</div>
				<label class="col-sm-3" for="add_organization" style="font-size:15px;text-align:right;">机构号</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="add_organization"
						name="organization"   />
				</div>
			</div>
			<div class="form-group">

				
				<label class="col-sm-3" for="add_teller_id_type" style="font-size:15px;text-align:right;">证件类型</label>
				<div class="col-sm-3">
						<select id="add_teller_id_type" name="teller_id_type"
						class="form-control">
						<option value="01">身份证</option>
						<option value="02">驾照</option>
						<option value="03">护照</option>
						<option value="04">其他</option>
					</select>
				</div>
				<label class="col-sm-3" for="add_teller_idno" style="font-size:15px;text-align:right;">证件号</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="add_teller_idno"
						name="teller_idno"   />
				</div>
			</div>
			<div class="form-group">
				
				<label class="col-sm-3" for="add_tellerphone" style="font-size:15px;text-align:right;">手机号</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="add_tellerphone"
						 >&nbsp;
				</div>
				<label class="col-sm-3" for="add_teller_password" style="font-size:15px;text-align:right;">密码</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="add_teller_password"
						name="teller_password"  />
				</div>
			</div>
			<div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addTellerSubmit();">提交</button>
            </div>
		</form>
            
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
	<!-- Javascript -->
	<script src="assets/vendor/jquery/jquery.min.js"></script>
	<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	<script src="assets/vendor/jquery.easy-pie-chart/jquery.easypiechart.min.js"></script>
	<script src="assets/vendor/chartist/js/chartist.min.js"></script>
	<script src="assets/scripts/klorofil-common.js"></script>
	<script src="assets/scripts/common.js"></script>
	<script src="assets/scripts/bootstrap-datetimepicker.min.js"></script>
	<script src="assets/scripts/bootstrap-table.js"></script>
		<script src="assets/scripts/bootstrap-table-toolbar.js"></script>
	
	
	
	<script type="text/javascript">
	
	$("#subPages4").addClass("in");
	$(function () {
	    //1.初始化Table
	    var oTable = new TableInit();
	    oTable.Init();
	    //当点击查询按钮的时候执行
         $("#searchBtn").bind("click", oTable.Init);
	});
	var TableInit = function () {
	    var oTableInit = new Object();
	    //初始化Table
	    oTableInit.Init = function () {
	    	$("#table").bootstrapTable('destroy'); 
	    	$('#table').bootstrapTable({
	            url: '/chuan/getTellerList.do',         //请求后台的URL（*）
	            method: 'post',                      //请求方式（*）
	            dataField : "data",
	            striped: true,                      //是否显示行间隔色
	            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	            pagination: true,                   //是否显示分页（*）
	            sortable: false,                     //是否启用排序
	            sortOrder: "asc",                   //排序方式
	            queryParams: oTableInit.queryParams,//传递参数（*）
	            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
	            pageNumber:1,                       //初始化加载第一页，默认第一页
	            pageSize: 10,                       //每页的记录行数（*）
	            pageList: [10, 25],        //可供选择的每页的行数（*）
	            strictSearch: true,
	            minimumCountColumns: 2,             //最少允许的列数
	            clickToSelect: true,                //是否启用点击选中行
	            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
	            uniqueId: "number",                     //每一行的唯一标识，一般为主键列
	            cardView: false,                    //是否显示详细视图
	            detailView: false,                   //是否显示父子表
	            columns: [ {
                    field: 'teller_number',
                    title: '柜员代号',
                    align: 'center' // 居中显示
                }, {
                    field: 'teller_name',
                    title: '柜员名称',
                    align: 'center' // 居中显示
                }, {
                    field: 'teller_role',
                    title: '柜员角色',
                    align: 'center' // 居中显示
                }, {
                    field: 'teller_status',
                    title: '柜员状态',
                    align: 'center',// 居中显示
                    formatter:function(value,row,index){
                    	var status_name ="";
                    	if(value=="0")
                    		status_name = "已退出";
                    	else if(value=="1")
                    		status_name = "已登录";
                    	else
                    		status_name ="状态异常";
                    	return status_name;
                    },
                    footerFormatter:"柜员状态"
                }, {
                    field: 'organization',
                    title: '机构',
                    align: 'center' // 居中显示
                }, {
                    field: 'teller_id_type',
                    formatter:function(value,row,index){
                    	var type_name ="";
                    	if(value=="01")
                    		type_name = "身份证";
                    	else if(value=="02")
                    		type_name = "驾照";
                    	else if(value=="03")
                    		type_name ="护照";
                    	else
                    		type_name = "其他"
                    	return type_name;
                    },
                    title: '证件类型',
                    align: 'center' // 居中显示
                }, {
                    field: 'teller_idno',
                    title: '证件号',
                    align: 'center' // 居中显示
                }, {
                    field: 'tellerphone',
                    title: '手机号',
                    align: 'center' // 居中显示
                }, {
                    field: 'teller_email',
                    title: '邮箱',
                    align: 'center' // 居中显示
                }, {
                	field: 'Button',
                	title: '操作',
                	events: operateEvents,
                	formatter: operateFormatter
                }]
	        });
	    };
	  //得到查询的参数
	    oTableInit.queryParams = function (params) {
	        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
	            limit: params.limit,   //页面大小
	            offset: params.offset,  //页码
	            teller_number: $("#teller_number").val(),
	            teller_name: $("#teller_name").val(),
	            teller_status: $("#teller_status").val()
	        };
	        return temp;
	    };
	    return oTableInit;
	};
	
	window.operateEvents={
			
	"click #tableEditor":function(e, value, row, index){
		$("#change_teller_number").val(row.teller_number);
		$("#change_teller_name").val(row.teller_name);
		$("#change_teller_role").val(row.teller_role);
		$("#change_teller_status").val(row.teller_status);
		$("#change_teller_id_type").val(row.teller_id_type);
		$("#change_teller_idno").val(row.teller_idno);
		$("#change_tellerphone").val(row.tellerphone);
		$("#change_teller_email").val(row.teller_email);
		$("#change_organization").val(row.organization);
		$('#myModal').modal('show');
	}
};
	
	function operateFormatter(value, row, index) {
		return [
			'<button id="tableEditor" type="button" class="RoleOfA btn-default bt-select">编辑</button>',
		].join('');
	}
	
	function change_submit(){
		var data = new Object();
		data.teller_number = $("#change_teller_number").val();
		data.teller_name = $("#change_teller_name").val();
		data.teller_role = $("#change_teller_role").val();
		data.teller_status = $("#change_teller_status").val();
		data.teller_id_type = $("#change_teller_id_type").val();
		data.teller_idno = $("#change_teller_idno").val();
		data.tellerphone = $("#change_tellerphone").val();
		data.teller_email = $("#change_teller_email").val();
		data.organization = $("#change_organization").val();
		$.ajax({
			type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/chuan/updateTellerList.do" ,//url
            contentType : "application/json",
            data: JSON.stringify(data),
	 		success:function(){
       		 	$.MsgBox.Confirm("温馨提示", "柜员信息修改成功", function(){ $('#myModal').modal('hide');location.reload();});
	 		},
	 		error: function(XMLHttpRequest, textStatus, errorThrown){
            	alert("执行失败");
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
             }
	 	});
	}
	
	
	function addTellerView(){
		$('#myModal1').modal('show');
	}
	function addTellerSubmit(){
		var data = new Object();
		data.teller_number = $("#add_teller_number").val();
		data.teller_name = $("#add_teller_name").val();
		data.teller_role = $("#add_teller_role").val();
		data.teller_status = $("#add_teller_status").val();
		data.teller_id_type = $("#add_teller_id_type").val();
		data.teller_idno = $("#add_teller_idno").val();
		data.tellerphone = $("#add_tellerphone").val();
		data.teller_email = $("#add_teller_email").val();
		data.organization = $("#add_organization").val();
		data.teller_password = $("#add_teller_password").val();
		$.ajax({
			type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/chuan/addTeller.do" ,//url
            contentType : "application/json",
            data: JSON.stringify(data),
	 		success:function(){
       		 	$.MsgBox.Confirm("温馨提示", "柜员信息修改成功", function(){ $('#myModal').modal('hide');location.reload();});
	 		},
	 		error: function(XMLHttpRequest, textStatus, errorThrown){
            	alert("执行失败");
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
             }
	 	});
	}
	</script>
	
</body>

</html>
